<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
    <button id="btn1">test</button>
    <div>
            <ul>
                <li>同步个异步的区别是什么？分别举一个同步和异步的例子<br>

                    <ol>同步会阻塞代码执行，而异步不会</ol>
                    <ol>alert是同步，setTimeout是异步</ol>
                </li>

                <li>一个关于setTimeout的笔试题<br>
                   
                </li>
                <li>前端使用异步的场景有哪些<br>
                        <ol>定时任务：setTimeout、setInverval</ol>
                        <ol>网络请求：ajax请求，动态<img> 加载</ol>
                        <ol>时间绑定</ol>
                </li>
            </ul>
        </div>
    <script>
         //异步
         console.log(100)
        setTimeout(function(){
            console.log(200)
        },10000)
        console.log(300)  //100  300 200

        //使用场景，中间的先暂存起来，执行前面和后面，完之后再执行暂存的
        console.log('start')
        $.get('goods.json',function(data){
            console.log(data)
        })
        console.log('end')

        console.log('start1')
        document.getElementById('btn1').addEventListener('click',function(){
            alert('clicked')
        })
        console.log('end1')

        //setTimeout的例子,1 3 5 2 4
        console.log(1)
        setTimeout(function(){
            console.log(2)
        },0)
        console.log(3)
        setTimeout(function(){
            console.log(4)
        },1000)
        console.log(5)
    </script>
</body>
</html>